import { NodeSize } from '../config'

export default function sequence(flow) {
  flow.register('sequence', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M519.533714 261.729524H217.697524v514.925714h301.83619v-514.925714z m-218.307047 346.989714H271.847619v-190.854095h29.379048v190.854095z m25.819428 0v-190.854095h132.217905v190.854095h-132.217905z'
            }
          ),
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M356.449524 447.268571h73.411047v132.071619H356.449524z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M271.823238 417.865143h29.379048v190.854095h-29.379048zM327.046095 417.865143v190.854095h132.217905v-190.854095h-132.217905z m102.814476 161.475047H356.449524v-132.071619h73.411047v132.071619z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M176.249905 220.306286v597.796571h676.985905V220.306286H176.249905z m461.482666 106.008381h73.435429v63.536762h-73.435429v-63.536762z m0-29.379048v-35.181714h73.435429v35.181714h-73.435429zM217.697524 261.729524h301.83619v514.925714H217.697524v-514.925714z m493.470476 444.854857h-73.435429v-63.512381h73.435429v63.512381z m100.59581 70.070857h-71.216762V613.668571h-132.193524v122.319239h102.814476v40.691809h-186.758095v-514.925714h83.943619v157.500952h132.193524v-157.500952h71.216762v514.901333z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          '增加序列'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
